<template >
    <div class="goods">
        <Scroll class="content"  ref="leftScroll" >
            <div class="menu-wrapper">
            <ul>
                <li :class="['menu-item',{ 'list-item-current': currentIndex === index }]" v-for="(item,index) in foods" :key="index" @click='handleFoodClick(index)'>
                     <img :src="item.icon" v-if="item.icon" />
                    {{ item.name }}
                </li>
            </ul>
        </div>
        </Scroll>
        <Scroll ref="rightScroll" :probe-type="3" @scrollTop="scrollTop" class="content1">
            <div class="foods-wrapper">
            <ul  ref='rightUl' class="detail-category">
                <li
                    class="category-block"
                    v-for="(category, index) in foods"
                    :key="index"
                >
                    <!-- 分类名 -->
                    <h1 class="category-title">{{ category.name }}</h1>
                    <!-- 当前分类下所有食物 -->
                    <ul class="category-list">
                        <li
                            class="list-item"
                            v-for="(food, index) in category.foods"
                            :key="index"
                        >
                            <div class="item-left">
                                <img @load="imgLoad" :src="food.icon" />
                            </div>
                            <div class="item-right">
                                <h3 class="item-name">{{ food.name }}</h3>
                               
                                <div class="item-data">
                                    <span>月售{{ food.sellCount }}份</span>
                                    <span>好评率{{ food.rating }}%</span>
                                </div>
                                <div class="flex">
                                    <div class="item-price">
                                        <span>￥{{ food.price }}</span>
                                        <del v-if="food.oldPrice">￥{{ food.oldPrice }}</del>
                                    </div>
                                    <Button :food='food'></Button>
                                   
                                </div>
                            </div>
                            
                        </li>
                    </ul>
                </li>
            </ul>
            </div>
        </Scroll>
        <ShopCar class="car" :total='total'></ShopCar>
    </div>
</template>

<script>
import ShopCar from './ShopCar/ShopCar'
import Scroll from 'components/common/Scroll/Scroll'
import {mapState} from 'vuex'
import {debounce} from 'components/common/untils'
import Button from 'components/common/Button/Button'
export default {
  data() {
        return  {
           currentIndex:0,
           scrollY: 0, // 右边滑动距离
           tops:[],//右侧所有分类li的top组成的数组，在列表显示之后统计一次
           getY:null,//为了做防抖
           total:0//总计的价格
        }
  },
  mounted() {
    //   this._initTops()
    
    
  },
  created () {
      this.getY = debounce(()=>{
            this.tops[0]=10,
            [...this.$refs.rightUl.children].filter((item,index)=>{
                return index!=0?this.tops.push(item.offsetTop):''
            })
            this.tops.push(Number.MAX_VALUE)
      })
  },
  components:{
      Scroll,
      ShopCar,
      Button
  },
  computed: {
      ...mapState({
          foods:state=>state.shop.foods
      }),
   
  },
  methods: {
    handleFoodClick(index){
        this.currentIndex=index
        const top = this.tops[index]
        this.$refs.rightScroll.scrollTo(0,-top,500)
    },
    scrollTop(position){
        this.scrollY = position
        //滚动右侧左侧导航自己变色
        for (let i = 0; i < this.tops.length-1; i++) {
            if (this.currentIndex!=i&&(this.scrollY>=this.tops[i]&&this.scrollY<=this.tops[i+1])) {
                this.currentIndex=i
            }
            
        }
        
    },
    imgLoad(){
        this.$nextTick(()=>{
            //为了做防抖,
            //点击左侧标题滚动到对应位置
            this.getY()
        })
    },
   

  },

  
};
</script>

<style lang="less" scoped>

.goods{
    display: flex;
    position: absolute;
    top: 194px;
    bottom: 44px;
    width: 100%;
    overflow: hidden;
    .menu-wrapper{
        width: 80px;
        background-color: #f3f5f7;
        .menu-item{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 54px;
            border-bottom: 1px solid #ccc;
            img{
                width: 12px;
                height: 12px;
            }
        }
       
    }
     .foods-wrapper{
         padding-left: 10px;
         flex: 1;
         .category-title{
             font-size: 16px;
         }
         .category-list{
             .list-item{
                 height: 115px;
               
                 display: flex;
                 .item-left{
               
                img{
                    margin-right: 5px;
                    width: 80px;
                    height: 52px;
                }
             }
             .item-right{
              
                 .item-name{
                     font-size: 16px;
                 }
             }
             .item-card{
                 position: absolute;
                 
             }
             .flex{
                 justify-content: space-between;
                 display: flex;
             }
             .item-price{
                 color: red;
                 margin: 5px;
             }
           
           
             }
         }
            
        }
   

}

.content{
    height: 100% - 194px - 49px;
}
.content1{
    height: 100% - 194px - 49px;
}
.list-item-current{
    color: pink;
    background-color: white;
}
</style>

